<template>
    <view classs="transferCustomer">
        <uni-nav-bar fixed left-icon="left" title="转移客户" @clickLeft="backHandle" class="unibarS">
            <block slot="right">
                <text class="sub-btn" @click="submit()">提交</text>
            </block>
        </uni-nav-bar>
        <view class="transferCustomer-content">
            <u--form labelPosition="left" :model="formData" ref="uForm" labelWidth="100">
                <u-form-item class="item-box" label="接受业务经理" required prop="userInfo.salesman" @click="selectHandle()"
                    borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view v-if="formData.businessManagerId" class="avatar-box">
                            <u-avatar class="avatar" size="25" :src="formData.avatar"></u-avatar>
                            <text>{{ formData.businessManagerIdName }}</text>
                        </view>
                        <view v-else class="item-temp-text-empty">点击选择</view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item class="item-box" label="备注信息：" labelPosition="top" ref="item1">
                    <u--textarea v-model="formData.remark" border="false" placeholder="请输入备注信息" count
                        style="margin-top: 20rpx; background: #CCCCCC19;"></u--textarea>
                </u-form-item>
                <view class="note">注：如需变更客户相关记录归属人员请勾选相关选项</view>
            </u--form>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                ids: [],
                // 备注
                remark: '',
                businessManagerId: null,
                businessManagerIdName: null,
                avatar: null
            }
        }
    },
    onLoad(options) {
        if(options.id) {
            this.formData.ids.push(options.id)
        }
    },
    methods: {
        submit() {
            let obj = {
                ids: this.formData.ids,
                businessManagerId: this.formData.businessManagerId,
                remark: this.formData.remark
            }
            this.$http.put('/app/customer/transferCustomer', obj).then(res => {
                let data = res.data
                if (data.code == 200) {
                    uni.showToast({ title: data.msg, duration: 1000 });
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1000)
                } 
            })
        },
        // 选择业务员
        selectHandle() {
            let that = this
            uni.navigateTo({
                url: '/pages/crm/customer/selectSalesman',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        that.formData.businessManagerId = data.data.userId
                        that.formData.businessManagerIdName = data.data.userName
                        that.formData.avatar = data.data.avatar
                    },
                },
                success: function (res) {
                    // console.log('success:' + JSON.stringify(res))
                    let obj = {
                        userId: that.formData.businessManagerId,
                        userName: that.formData.businessManagerIdName,
                        avatar: that.formData.avatar,
                    }
                    res.eventChannel.emit('emitDataHandle', { data: obj })
                }
            });
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.transferCustomer-content {
    margin-top: 32rpx;
}

.note {
    padding: 0 32rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(255, 0, 28, 1);
    background: rgba(255, 255, 255, 1);
    padding-bottom: 18rpx;
}

.item-box {
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    padding: 0 32rpx;

    /deep/.u-input__content__field-wrapper__field {
        text-align: right !important;
    }
}

.item-temp-box {
    text-align: right;
    width: 100%;
    font-size: 30rpx;

    >view {
        // 超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.item-temp-text-empty {
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(100, 117, 136, 1);
}

.avatar-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .avatar {
        margin-right: 10rpx;
    }
}
</style>